<template>
  <ul>
    <li v-for="item in data" :key="item.text" @click.stop="toggleSubList(item)">
      {{item.text}}
      <!-- <ul v-if="item.children">
        <li v-for="item in item.children" :key="item.text">{{item.text}}</li>
      </ul> -->
      <Tree2 v-if="item.children && item.expand" :data="item.children"/>
    </li>
  </ul>
</template>

<script> 
/* 一个组件内部有自己的组件标签 */
export default {  // 
  name: 'Tree2', // 作为内部的标签名
  props: ['data'],

  methods: {
    toggleSubList (item) {
      if (item.hasOwnProperty('expand')) {
        item.expand = !item.expand
      } else {
        this.$set(item, 'expand', true)
      }
    }
  }
}
</script>